<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<script type="text/javascript" src="js/jquery-1.11.0.js"></script>
<script type="text/javascript">

	function buyBtn(btn){
		var id = $(btn).attr("id");
		location = "buygood.jsp?id="+id;
	}
	
	$(function(){
		function init(){
			$.get("QueryGoodsServlet?type=2",function(data){
				$.each(data,function(i,dt){
					var itme = "<div id='gooditem'>"+
					"<img src='"+dt.imge_gd+"' class='goodimg'>"+
					"<br><span>"+dt.name_gd+"</span><br>"+
					"<span>价格￥:</span><span style=\"color: red;\">"+dt.price_gd+"</span>"+
					"<br><span>库存:</span><span style=\"color: red;\">"+dt.number_gd+"</span>"+
					"<br><span id='"+dt.id_gd+"' onclick='buyBtn(this)' class='buybtn'>购买</span></div>";
					//alert(itme);
					$("#goodslist").append(itme);
				});
			},"json");
		}
		init();
	});
</script>
<style type="text/css">
	#goodslist{
		height: 100%;
		min-height:600px;
		width: 700px;
		border: solid 1px orange;
		margin: auto;
	}
	
	#gooditem{
		display:inline-block;
		height:220px;
		width:200px;
		text-align: center;
		border:solid 1px white;
	}
	.buybtn{
		width:50px;
		height:20px;
		padding:5px;
		background-color: green;
		color: white;
		display: inline-block;
		text-align: center;
		cursor:pointer;
	}
	#gooditem:HOVER {
		border: solid 1px green;
	}
	.goodimg{
		width: 140px;
		height: 100px;
	}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<base href="<%=basePath%>"/>

</head>
<body>
	<div id="goodslist">
		<!-- <div id="gooditem">
			<img alt="" src="images/car.jpg" width="140px" height="100px">
			<span>ddddddddddddddddd</span>
			<br>
			<span>价格￥:</span><span style="color: red;">1990</span>
			<br>
			<span>库存:</span><span style="color: red;">1990</span>
			<br>
			<span class="buybtn" >购买</span>
		</div> -->
	</div>
</body>
</html>